import { ref, onMounted, onUnmounted } from 'vue';
// hook文件的命名规则 usexxx名字
export default function useGetMousePosition() {
    // 没有的话造
    const x = ref(0);
    const y = ref(0);

    // 绑定的事件对应的回调函数
    const updatePosition = (e: MouseEvent) => {
        x.value = e.pageX;
        y.value = e.pageY;
    };
    // 点击界面获取xy的值
    // 浏览器界面 document，document上面绑定事件， DOM
    // 什么时候能操作DOM？ setup是在beforeCreate之前创建的直接操作不可以
    //在mounted时是最早可以操作DOM元素的时刻，vue3当中的mounted onMounted
    onMounted(() => {
        // 在此时是最早能操作DOM的时刻
        document.addEventListener("click", updatePosition);
    });

    // 离开取消事件
    onUnmounted(() => {
        // 离开取消addEventListener绑定的事件
        document.removeEventListener("click", updatePosition);
    });
    // 函数是否需要有返回，函数模块的功能是获取xy坐标
    return {
        x, y
    }
}